<template>
  <div class="home">
    <div>
      <p>机器器</p>
    </div>
    <div class="header">
      <span class="s">新人有礼 福利专区</span>
      <span class="d">一元专区|新人专享券|新人特惠</span>
    </div>
    <div class="neirong">
      <div v-for="(item, i) in arr" :key="i">
        <div class="jj">
          <img :src="item.imgUrl" alt="" />
          <span>{{ item.user }}</span>
          <span>{{item.money}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
             arr:[
            {
                imgUrl:"https://res8.vmallres.com/pimages//uomcdn/CN/pms/202401/gbom/6942103111068/800_800_D844E885634E9B6679B7ED02697B8D86mp.png",
                user:"新人价",
                money:"￥599起"
            },
            {
                imgUrl:"https://res8.vmallres.com/pimages//uomcdn/CN/pms/202401/gbom/6942103111068/800_800_D844E885634E9B6679B7ED02697B8D86mp.png",
                user:"新人价",
                money:"￥599起"
            },
            {
                imgUrl:"https://res8.vmallres.com/pimages//uomcdn/CN/pms/202401/gbom/6942103111068/800_800_D844E885634E9B6679B7ED02697B8D86mp.png",
                user:"新人价",
                money:"￥599起"
            },
            {
                imgUrl:"https://res8.vmallres.com/pimages//uomcdn/CN/pms/202401/gbom/6942103111068/800_800_D844E885634E9B6679B7ED02697B8D86mp.png",
                user:"新人价",
                money:"￥599起"
            },
            {
                imgUrl:"https://res8.vmallres.com/pimages//uomcdn/CN/pms/202401/gbom/6942103111068/800_800_D844E885634E9B6679B7ED02697B8D86mp.png",
                user:"新人价",
                money:"￥599起"
            }
        ]
        }
    },
    methods:{

    }
}
</script>

<style scoped>
.home {
  width: 900px;
  height: 150px;
  background-color: aqua;
}
.header {
  margin-left: 20px;
  width: 600px;
}
.s {
  font-size: 25px;
  font-weight: bold;
}
.d {
  margin-left: 90px;
  font-size: 10px;
  color: rgb(145, 145, 145);
}
.neirong {
  width: 900px;
  height: 120px;
  background-color: rgb(165, 31, 31);
  display: flex;
  justify-content: space-evenly;
}
.jj {
  width: 150px;
  height: 100px;
  background-color: rgb(235, 255, 255);
  margin-top: 10px;
  border-right: 1px dashed black;
}
.jj img{
    width: 100px;
    height: 100px;
    object-fit: cover;
    object-position: center;
}
.neirong .jj:last-of-type {
  border-right: none;
}
</style>